<template>
  <div>
    <div class="flex w-full justify-between">
      <!--测试题目列表-->
      <div class="w-300px">
        <h3 class="py4 font-bold">题目列表</h3>
        <draggable v-model="questionsData" item-key="question" handle=".handle" @start="drag = true" @end="drag = false">
          <template #item="{ element, index }">
            <div
              class="question-title flex items-center hover:bg-blue-50"
              :class="{ choose: index === chooseIndex }"
              @dblclick="editQuestion(index)"
              @click="chooseIndex = index"
            >
              <div class="handle">
                <dk-icon icon="Rank"></dk-icon>
              </div>
              <div class="cursor-pointer truncate">{{ index + 1 }}. {{ element.question }}</div>
              <div class="delete-item" @click="delQuestion(index)">
                <dk-icon icon="Close" :size="12" />
              </div>
            </div>
          </template>
          <template #footer>
            <div class="question-title bg-blue-500 text-white hover:bg-blue-600 cursor-pointer" @click="addQuestion()">
              <dk-icon icon="Plus"></dk-icon>
              新增问题
            </div>
          </template>
        </draggable>
      </div>
      <!--测试选项列表-->
      <div class="w-500px">
        <h3 class="py4 font-bold">选项列表</h3>
        <div v-if="questionsData[chooseIndex]">
          <draggable v-model="questionsData[chooseIndex].answers" item-key="index" handle=".handle" @start="drag = true" @end="drag = false">
            <template #item="{ element, index }">
              <div class="option-title relative">
                <div class="handle">
                  <dk-icon icon="Rank"></dk-icon>
                </div>
                <el-input v-model="questionsData[chooseIndex].answers[index].number" placeholder="A" class="m-r-1" style="width: 100px"></el-input>
                <el-input v-model="questionsData[chooseIndex].answers[index].value" clearable class="m-r-1" @dblclick="editOption(index)"></el-input>
                <el-input-number
                  v-model="questionsData[chooseIndex].answers[index].question"
                  class="m-r-1"
                  style="width: 200px"
                  controls-position="right"
                  :min="0"
                ></el-input-number>
                <el-input-number
                  v-model="questionsData[chooseIndex].answers[index].result"
                  class="m-r-1"
                  style="width: 200px"
                  controls-position="right"
                  :min="0"
                ></el-input-number>
                <el-input-number
                  v-model="questionsData[chooseIndex].answers[index].score"
                  style="width: 200px"
                  controls-position="right"
                  :min="0"
                ></el-input-number>
                <div class="delete-item" @click="delOption(index)">
                  <dk-icon icon="Close" :size="12" />
                </div>
              </div>
            </template>
            <template #footer>
              <div class="option-title bg-red-500 text-white hover:bg-red-600 cursor-pointer" @click="addOption()">
                <dk-icon icon="Plus"></dk-icon>
                新增选项
              </div>
            </template>
            <template #header>
              <div class="option-header flex items-center pb2">
                <div class="w-40px">拖拽</div>
                <div class="w-40px">序号</div>
                <div class="w-180px">选项内容（双击详细编辑）</div>
                <div class="w-80px">跳题目</div>
                <div class="w-80px">跳结果</div>
                <div class="w-80px">得分</div>
              </div>
            </template>
          </draggable>
        </div>
        <div v-else>
          <el-empty></el-empty>
        </div>
      </div>
      <!---测试结果列表-->
      <div class="w-400px">
        <h3 class="py4 font-bold">结果列表</h3>
        <div class="result-content">
          <div class="result-header flex items-center pb2">
            <div class="w-200px">标题（双击详细编辑）</div>
            <div class="w-50px">图片</div>
            <div class="w-100px">规则</div>
            <div>删除</div>
          </div>
          <ul>
            <li v-for="(item, key) in resultsData" :key="key">
              <div>
                <el-input v-model="item.title" placeholder="请输入标题" @dblclick="editResult(key)" />
              </div>
              <div>
                <dk-image-input v-model="item.image" :show-input="false" :img-size="40" placeholder="请选择图片" />
              </div>
              <div>
                <el-input v-model="item.rule" placeholder="请输入规则" style="width: 80px" />
              </div>
              <div>
                <el-button type="danger" icon="Delete" @click="resultsData.splice(key, 1)" />
              </div>
            </li>
            <li class="option-title bg-green-500 text-white hover:bg-green-600 cursor-pointer" @click="addResult()">
              <div class="cursor-pointer">
                <dk-icon icon="Plus"></dk-icon>
                新增结果
              </div>
            </li>
          </ul>
        </div>
        <!--        <div v-for="(item, key) in combinations" :key="key">{{ key + 1 }} {{ item }}</div>-->
      </div>
    </div>
    <div class="text-center">
      <el-button class="w-150px" type="primary" @click="submit()">确定</el-button>
    </div>
  </div>
  <el-dialog v-model="show" title="编辑" :z-index="1000">
    <div>
      <el-form label-width="100" label-position="left">
        <el-form-item label="测验问题">
          <el-input v-model="questionsData[chooseIndex].question" placeholder="请输入问题" />
        </el-form-item>
        <el-form-item label="问题描述">
          <el-input v-model="questionsData[chooseIndex].desc" type="textarea" placeholder="请输入问题描述" />
        </el-form-item>
        <el-form-item label="问题插图">
          <dk-image-input v-model="questionsData[chooseIndex].image" placeholder="请选择图片" />
        </el-form-item>
        <el-form-item label="问题音频">
          <dk-audio-input v-model="questionsData[chooseIndex].audio" placeholder="请输入问题音频链接或者选择已有音频" />
        </el-form-item>
        <el-form-item label="问题视频">
          <dk-video-input v-model="questionsData[chooseIndex].video" placeholder="请输入问题视频链接或者选择已有视频" />
        </el-form-item>
        <el-button type="primary" @click="show = false">确定</el-button>
      </el-form>
    </div>
  </el-dialog>
  <el-dialog v-model="showOption" title="编辑选项" :z-index="1000">
    <div>
      <el-form label-width="100" label-position="left">
        <el-form-item label="选项序号">
          <el-input v-model="questionsData[chooseIndex].answers[chooseOptionIndex].number" placeholder="请输入选项序号" />
        </el-form-item>
        <el-form-item label="选项内容">
          <el-input v-model="questionsData[chooseIndex].answers[chooseOptionIndex].value" placeholder="请输入选项内容" />
        </el-form-item>
        <el-form-item label="选项图片">
          <dk-image-input v-model="questionsData[chooseIndex].answers[chooseOptionIndex].image" placeholder="请输入选项图片" />
        </el-form-item>
        <el-form-item label="选项得分">
          <el-input-number v-model="questionsData[chooseIndex].answers[chooseOptionIndex].score" :min="0" />
        </el-form-item>
        <el-form-item label="跳转题目">
          <div>
            <el-input-number v-model="questionsData[chooseIndex].answers[chooseOptionIndex].question" :min="0" />
            <p class="text-12px text-gray">设置当前选中后要跳转到的题目序列号，如果不跳转则填写0</p>
          </div>
        </el-form-item>
        <el-form-item label="跳转答案">
          <div>
            <el-input-number v-model="questionsData[chooseIndex].answers[chooseOptionIndex].result" :min="0" />
            <p class="text-12px text-gray">设置当前选中返回结果的序列号，如果不跳转则填写0</p>
          </div>
        </el-form-item>
        <el-button type="primary" @click="showOption = false">确定</el-button>
      </el-form>
    </div>
  </el-dialog>
  <el-dialog v-model="showResult" title="编辑结果" :z-index="1000" width="1000">
    <div>
      <el-form label-width="120" label-position="left">
        <el-form-item label="标题">
          <el-input v-model="resultsData[chooseResultIndex].title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="结果详情">
          <el-input v-model="resultsData[chooseResultIndex].desc" type="textarea" placeholder="请输入结果详情" />
        </el-form-item>
        <el-form-item label="结果详情背景图">
          <dk-image-input v-model="resultsData[chooseResultIndex].bgImage" placeholder="请选择结果详情背景图" />
        </el-form-item>
        <el-form-item label="结果图片">
          <dk-image-input v-model="resultsData[chooseResultIndex].image" placeholder="请选择图片" />
        </el-form-item>
        <el-form-item label="匹配规则">
          <div>
            <el-input v-model="resultsData[chooseResultIndex].rule" placeholder="请输入匹配规则" />
            <div class="text-12px text-gray">
              <p>总星级为5星，用户评测得分3星，则【匹配规则】填写：3-5 2.总星级为10星，用户评测得分6星，则【匹配规则】填写：6-10</p>
              <p>总分为100分，用户评测得分75分，则【匹配规则】填写包含该结果的区间，如：60-80</p>
              <p>总分为10分，用户评测得分7分，则【匹配规则】填写包含该结果的区间，如：6-10</p>
              <p>如果展示结果类型为【精准匹配】，则【匹配规则】填写正确答案，比如所有选项的分值为5，则填写5</p>
            </div>
          </div>
        </el-form-item>
        <el-button type="primary" @click="showResult = false">确定</el-button>
      </el-form>
    </div>
  </el-dialog>
</template>
<script>
import draggable from 'vuedraggable'

import { updateTestData } from '@/api/test.js'

export default {
  name: 'DkTestQuestionContent',
  components: {
    draggable
  },
  props: {
    pid: {
      type: [Number, String],
      default: 0
    },
    questions: {
      type: Array,
      default: () => []
    },
    results: {
      type: Array,
      default: () => []
    }
  },
  emits: ['submit'],
  data() {
    return {
      show: false,
      showOption: false,
      drag: false,
      // 问题
      questionsData: [],
      chooseIndex: 0,
      chooseOptionIndex: 0,
      // 结果
      resultsData: [],
      showResult: false,
      chooseResultIndex: 0
    }
  },
  computed: {
    // combinations() {
    //   const getAllCombinations = (questions) => {
    //     if (questions.length === 0) return [[]]
    //
    //     const firstQuestionAnswers = questions[0].answers.map((answer) => answer.value) // 修改这里来提取"value"
    //     const restQuestions = questions.slice(1)
    //     const restCombinations = getAllCombinations(restQuestions)
    //
    //     const combinations = []
    //     for (const answer of firstQuestionAnswers) {
    //       for (const combination of restCombinations) {
    //         combinations.push([answer, ...combination])
    //       }
    //     }
    //     return combinations
    //   }
    //   return getAllCombinations(this.questionsData)
    // }
  },
  mounted() {
    this.questionsData = this.questions || []
    this.resultsData = this.results || []
  },
  methods: {
    saveQuestion(index) {
      // 当编辑框失去焦点时保存更改
      if (this.chooseIndex === index) {
        this.questionsData[index].question = this.editingQuestion
        this.chooseIndex = -1 // 结束编辑
      }
    },
    submit() {
      updateTestData(this.pid, this.questionsData, this.resultsData).then((res) => {
        this.$emit('submit')
      })
    },
    editOption(index) {
      this.chooseOptionIndex = index
      this.showOption = true
    },
    addOption() {
      // this.questionsData[this.chooseIndex].answers[]
      const number = this.questionsData[this.chooseIndex].answers.length + 1

      this.questionsData[this.chooseIndex].answers.push({
        value: '新选项',
        number: String.fromCharCode(64 + number),
        score: 0,
        question: 0,
        result: 0
      })
    },
    delOption(index) {
      this.questionsData[this.chooseIndex].answers.splice(index, 1)
    },
    editQuestion(index) {
      this.chooseIndex = index
      this.show = true
    },
    addQuestion() {
      this.questionsData.push({
        question: '新问题，双击编辑修改',
        image: '',
        answers: []
      })
    },
    delQuestion(index) {
      this.questionsData.splice(index, 1)
    },
    addResult() {
      this.resultsData.push({
        title: '标题',
        desc: '',
        bgImage: '',
        image: '',
        rule: ''
      })
    },
    editResult(index) {
      this.chooseResultIndex = index
      this.showResult = true
    }
  }
}
</script>

<style scoped lang="scss">
.question-title,
.option-title {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 8px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  margin-bottom: 6px;
  position: relative;

  .handle {
    cursor: move;
    margin-right: 10px;
  }

  &.choose {
    background-color: #f5f7fa;
  }

  &:deep {
    .only-img {
      margin: 0;
    }
  }

  .delete-item {
    position: absolute;
    z-index: 99999;
    right: -10px;
    top: 10px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #000;
    color: #fff;
    border-radius: 100%;

    &:hover {
      background-color: #f56c6c;
    }
  }

  &:hover .delete-item {
    display: flex;
  }
}
.result-content {
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    margin-bottom: 6px;
    &:deep {
      .only-img {
        margin: 0;
        .media {
          line-height: 30px !important;
        }
      }
    }
  }
}
</style>
